<template>
    <div class="container">
      <h1>Add Pet Health Record</h1>
      <form @submit.prevent="submitForm" class="form">
        <div class="form-group">
          <label for="health">健康项目:</label>
          <select v-model="formData.health" required id="health">
            <option value="" disabled>请选择</option>
            <option value="1">驱虫</option>
            <option value="2">打疫苗</option>
          </select>
        </div>
        <div class="form-group">
          <label for="recodetime">记录时间:</label>
          <input type="datetime-local" v-model="formData.recodetime" required id="recodetime" />
        </div>
        <div class="form-group">
          <label for="describe">描述:</label>
          <textarea id="describe" v-model="formData.describe" placeholder="描述（可选）"></textarea>
        </div>
        <div class="form-group">
          <label for="petId">宠物:</label>
          <select v-model="formData.pet" required id="petId">
            <option value="" disabled>请选择</option>
            <option v-for="pet in pets" :key="pet.id" :value="pet.id">{{ pet.name }}</option>
          </select>
        </div>
        <button type="submit" class="btn-submit">提交</button>
      </form>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import axios from 'axios';
  
  const formData = ref({
    health: '',
    recodetime: '',
    describe: '',
    pet: null
  });
  
  // 从本地存储中获取 userId
  const userId = ref(localStorage.getItem("userid") || "");
  
  const pets = ref([]);
  
  const fetchPets = () => {
    if (!userId.value) return;
    axios
      .get(`http://127.0.0.1:8000/pet/user/${userId.value}/`)
      .then((result) => {
        pets.value = result.data.pets;
      })
      .catch((err) => {
        console.error("请求失败:", err);
        alert('无法获取宠物列表，请稍后重试');
      });
  };
  
  onMounted(fetchPets);
  
  const submitForm = () => {
    axios.post('http://127.0.0.1:8000/record/healthRecord/', formData.value)
      .then(response => {
        if (response.data.code === 200) {
          alert('添加成功');
          console.log('添加信息:', response.data);
          // 清空表单
          formData.value = {
            health: '',
            recodetime: '',
            describe: '',
            pet: null
          };
        }
      })
      .catch(error => {
        alert('请求失败，请检查网络或稍后再试');
        console.error('请求错误:', error);
      });
  };
  </script>
  
  <style scoped>
  /* 容器样式 */
  .container {
    max-width: 600px;
    margin: 50px auto;
    padding: 30px;
    border-radius: 12px;
    background-color: #f9f9f9;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }
  
  /* 表单标题样式 */
  h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: 1.8rem;
  }
  
  /* 表单样式 */
  .form {
    display: flex;
    flex-direction: column;
  }
  
  /* 表单组样式 */
  .form-group {
    margin-bottom: 20px;
  }
  
  /* 表单标签样式 */
  .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
  }
  
  /* 输入框、选择框和文本域样式 */
  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color 0.3s;
    background-color: #fff;
  }
  
  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    border-color: #007bff; /* 聚焦时的蓝色边框 */
    outline: none;
  }
  
  /* 文本域特定样式 */
  .form-group textarea {
    resize: vertical; /* 允许垂直调整大小 */
    min-height: 100px; /* 设置最小高度 */
  }
  
  /* 提交按钮样式 */
  .btn-submit {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    font-size: 1.1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }
  
  .btn-submit:hover {
    background-color: #0056b3;
    transform: translateY(-2px); /* 按钮悬浮时上移 */
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    .container {
      padding: 20px;
    }
  
    h1 {
      font-size: 1.5rem;
    }
  
    .btn-submit {
      font-size: 1rem;
    }
  }
  </style>
  